<template>
    <div class="AppItem">
        <img :src="apis.basePath + detail.icon" alt="">
        <div class="titleBox">
            <span class="title">{{detail.title}}</span>
            <br>
            <span class="version">v{{detail.lastVersion}}</span>
        </div>
    </div>
</template>
<script setup>
import apis from './apis'

const props = defineProps({  //获取传参的数据
    detail: Object,
})


</script>
<style scoped>
.AppItem {
    position: relative;
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
}

.AppItem:hover {
    background-color: rgba(100, 149, 237, 0.2);
}

.AppItem.active {
    background-color: rgba(100, 149, 237, 0.4);
}

.AppItem img {
    border-radius: 10px;
    margin: 7px;
    width: 60px;
}

.titleBox {
    position: absolute;
    color: #fff;
    top: 10px;
    left: 77px;
}
.titleBox .title {
    font-size: 17px;
    font-weight: bold;
}
</style>